<template>
  <div class="guardtable mediumtablestyle">
    <el-table
      :data="tableData2"
      :span-method="objectSpanMethod"
      :row-class-name="tableRowClassName"
      border
      style="width: 100%; margin-top: 20px"
      height="calc(100% - 40px)"
    >
      <el-table-column prop="deviceName" label="设备名称" width="100" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="name" label="采集名称" width="120"></el-table-column>
      <el-table-column prop="status" label="采集值" width="80" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!-- 1 遥测 数值  -->
          <!-- <div v-if="scope.row.remoteType=='1'">
            <span>{{scope.row.value?scope.row.value:'--'}}</span>
            <span>{{scope.row.unit?scope.row.unit:'' }}</span>
          </div>-->
          <!-- 2-遥信-状态 3-遥控-开关变位 4-遥调-暂无-->
          <!-- <div v-else>
            <span>{{scope.row.value?scope.row.pointerDict[Number(scope.row.value)].name:'未知'}}</span>
          </div>-->
          <div>
            <span>{{scope.row.value?scope.row.pointerDict[Number(scope.row.value)].name:'未知'}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="采集时间" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-if="scope.row.time">{{scope.row.time.substring(0,10)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="历史" width="65">
        <template slot-scope="scope">
          <span class="iconClick" @click="iconClick(scope.row)"></span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="控制" width="80">
        <template slot-scope="scope">
          <div class="control-col" @click="newControlPage(scope.row)">门禁控制</div>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="kzBtn">
      <el-button type="primary" @click="newControlPage()" class="centerbox">门禁控制</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import {LocksAPIModule} from '@/store/modules/locks'
interface tableaTtribute {
  row: any;
  column: any;
  rowIndex: any;
  columnIndex: any;
}
@Component
export default class GuardTable extends Vue {
  @Prop() datas!: any;
  historyPopupStatus: boolean = false; //历史弹窗
  colspan: any = {};
  rowspan: any = {
    num: 0,
    rowIndex: 0,
    columnIndex: [],
  };
  // 合并行数
  getSpanArr(data) {
    let obj = {};
    let deviceId;
    data.map((k, i) => {
      deviceId = k.deviceId;
      if (!obj[deviceId]) obj[deviceId] = [];
      obj[deviceId].push(k);
    });

    let num = {};
    let arr = [];
    let rowIndex = [];
    for (let key in obj) {
      num[key] = obj[key].length;
      rowIndex.push(arr.length);
      arr = [...arr, ...obj[key]];
    }

    this.colspan = {};
    this.rowspan = {
      num: num,
      rowIndex: rowIndex,
      columnIndex: [0],
    };
    // console.log(22222222222, this.rowspan);
    return arr;
  }
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // console.log(33333333333,row, column, rowIndex, columnIndex,this.rowspan.num[row.deviceId]);
    if (columnIndex === 0) {
      return {
        colspan: row.spanCol,
        rowspan: row.spanRow,
      };
    } else {
      return {
        colspan: 1,
        rowspan: 1,
      };
    }
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  // 门禁控制跳转
  newControlPage(val) {
    this.$router.push({
      path: "EntranceGuardPage/newControlPop",
      query: {code:this.$route.query.code,name:this.$route.query.name}
    });
  }
  // 返回按钮
  public goBack(val: string) {
    this.$router.push("EntranceGuardPage");
  }
  //表格-历史弹窗
  iconClick(value: Object) {
    // console.log(vlue);
    // this.historyPopupStatus = true;
    this.$emit("iconclick", value);
  }
  get tableData2() {
    var data = this.datas;
    // data= this.getSpanArr(data);
    // console.log(data);
    let tableData = [];
    data.forEach((tableItem) => {
      let length = tableItem.remoteType2.length;
      tableItem.remoteType2.forEach((item, index) => {
        // 表格合并start
        if (index === 0) {
          // console.log(length);
          item.spanRow = length;
          item.spanCol = 1;
        } else {
          item.spanRow = 0;
          item.spanCol = 0;
        }
        // 表格合并end
        item.parent = tableItem;
        tableData.push(item);
      });
    });
    return tableData;
  }
}
</script>

<style lang="scss" scoped>
.guardtable {
  width: 100%;
  height: 100%;
  // box-sizing: border-box;
  // padding: 0 0.1rem;
  .control-col {
    color: #1ab2ff;
    cursor: pointer;
  }
  .iconClick {
    display: inline-block;
    width: 0.42rem;
    height: 0.2rem;
    background: url(../../../../../assets/img/OnlineMonitor/cli_qx.png)
      no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    cursor: pointer;
  }
  .iconClick:hover {
    background: url(../../../../../assets/img/OnlineMonitor/nor_qx.png)
      no-repeat;
    background-size: 100% 100%;
  }
  .kzBtn{
    width: 100%;
    height: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button{
      width: 2rem;
    }
  }
}
</style>